<template>
  <div class="schedule-item">
    <div class="header">
      <div class="league-name">{{ leagueName }}</div>
      <div class="match-status" :class="status === 2 && 'process'">{{ filterStatus(status) }}</div>
      <div class="avatars">
        <!-- <img
          :src="avatar"
          alt="Avatar"
          v-for="(avatar, index) in avatars"
          :key="index"
          class="avatar"
        />
        <span class="more-options">...</span> -->
      </div>
    </div>
    <div class="match-details">
      <div class="time-box">
        <span class="time">{{ formatTime(time) }}</span>
      </div>
      <div class="match-info">
        <span class="team-name">{{ team1 }}</span>
        <p class="score">
          <span>{{ score1 }}</span> - <span>{{ score2 }}</span>
        </p>

        <span class="team-name">{{ team2 }}</span>
      </div>
      <div class="watch-button-wrapper">
        <button class="watch-button" v-show="filterButtonShow" @click="goLive">
          {{ buttonText }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, computed } from 'vue'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'
const router = useRouter()
const formatTime = (num) => {
  return dayjs(num).format('HH:mm')
}
const filterStatus = (type) => {
  switch (type) {
    case 1:
      return '未开始'
    case 2:
      return '直播中'
    case 3:
      return '已结束'
  }
}
const filterButtonShow = computed(() => {
  if (props.status === 2) {
    return true
  } else {
    return false
  }
})
const goLive = () => {
  console.log(props.id, props.type, props)
  router.push(`/score-detail?id=${props.id}&type=${props.type}`)
}
// Define props
const props = defineProps({
  leagueName: {
    type: String,
    required: true
  },
  id: {},
  type: {
    type: Number
  },
  status: {
    // type: String,
    // required: true
  },
  avatars: {
    // type: Array,
    // required: true
  },
  time: {
    // type: String,
    // required: true
  },
  team1: {
    type: String,
    required: true
  },
  team2: {
    type: String,
    required: true
  },
  score1: {
    type: Number,
    required: true
  },
  score2: {
    type: Number,
    required: true
  },
  buttonText: {
    type: String,
    default: '去观看'
  }
})
</script>

<style scoped lang="scss">
.schedule-item {
  display: flex;
  flex-direction: column;
  //   padding: 10px;
  //   border-radius: 10px;
  margin-bottom: 20px;
  width: 940px;
  height: 110px;
  background: #ffffff;
  border-radius: 20px 20px 20px 20px;
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
    padding: 10px 20px;
    border-bottom: 1px solid #e2eeff;
  }

  .league-name {
    font-weight: 400;
    font-size: 12px;
    color: #afb8cb;
    width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .match-status {
    font-weight: 400;
    font-size: 12px;
    color: #afb8cb;
    width: 400px;
    text-align: center;

    &.process {
      color: #e95d5d;
    }
    // flex: 1;
  }

  .avatars {
    display: flex;
    align-items: center;
    min-width: 110px;
    height: 30px;
    .avatar {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin-left: -5px; /* For overlapping effect */
      border: 2px solid #fff; /* White border to separate avatars */
    }

    .more-options {
      font-size: 20px;
      color: #666;
      margin-left: 5px;
    }
  }

  .match-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    // background-color: #ffffff;
    // border-radius: 10px;
    padding: 10px 20px;
  }

  .time-box {
    width: 72px;
    height: 32px;
    background: #eaf0ff;
    border-radius: 8px 8px 8px 8px;
    line-height: 32px;
    text-align: center;
    .time {
      font-weight: 400;
      font-size: 12px;
      color: #afb8cb;
    }
  }

  .match-info {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #333;
    justify-content: center;
    .team-name {
      margin: 0 5px;
      width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
    }

    .score {
      font-weight: 500;
      font-size: 16px;
      color: #e95d5d;
      width: 80px;
      text-align: center;
    }
  }
  .watch-button-wrapper {
    width: 80px;
    height: 30px;
  }
  .watch-button {
    // background-color: #4caf50;
    color: white;
    border: none;
    // padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #16b13a;
    border-radius: 20px 20px 20px 20px;
  }
}
</style>
